<template>
  <div class="jump">
    <a-form-model ref="ruleForm" class="form" :colon="false" :model="animations" layout="inline">
      <a-tooltip
        placement="left"
        title="动画会从上往下依次执行. 且当最后一个动画为离开动画时, 组件会在执行完动画后消失"
      >
        <a-divider orientation="left">动画序列 <a-icon type="question-circle" /></a-divider>
      </a-tooltip>

      <a-form-item v-show="animations.list.length === 0" class="row">
        <a-button type="primary" @click="handlePushClick">添加动画</a-button>
      </a-form-item>
      <Timeline class="time-line-list">
        <TimelineItem v-for="(k, index) in animations.list" :key="index">
          <div class="item">
            <a-form-model-item label="动画效果" :prop="`list.${index}.label`" class="row">
              <a-input
                v-model="k.label"
                readonly
                @click="() => handleShowAnimationsModal(index)"
                placeholder="请输入"
              />
              <a-icon class="dynamic-delete-button" type="minus-circle-o" @click="() => handleRemoveClick(k)" />
              <a-icon class="dynamic-delete-button" type="plus-circle" @click="() => handleAddClick(index)" />
            </a-form-model-item>
          </div>
        </TimelineItem>
      </Timeline>

      <div class="row align-right">
        <a-button v-show="!isRun" :disabled="disabled" type="primary" @click="handlePreview">预览动画</a-button>
        <div>
          <a-button v-show="isRun" :disabled="disabled" type="primary" @click="handleStop">
            <a-icon type="loading" />停止动画</a-button
          >
        </div>
      </div>
      <a-divider orientation="left">其它</a-divider>
      <a-form-item label="启用动画设置" prop="isEnable" class="row">
        <a-switch v-model="animations.isEnable" />
      </a-form-item>
      <!-- <a-form-item
          label="启用动画循环"
          prop="isLoop"
          class="row"
          >
          <a-switch v-model="animations.isLoop" />
        </a-form-item> -->
    </a-form-model>
    <AnimationsList
      @select="handleSelectAnimations"
      @close="handleCloseAnimationsList"
      :visible="animationsListvisible"
    />
    <!-- animate__animated animate__fadeInDown animate__delay-2s -->
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { Timeline } from 'ant-design-vue'
import { setSelectedComponent } from '../../../lib/utils'
import AnimationsList from './AnimationsList'
import EventBus from '../../../EventBus'
import { defaultAnimations } from '../../../lib/const'
import { stopAnimateByComponent } from '../../../lib/animate'

const TimelineItem = Timeline.Item

// 动画设置
export default {
  data() {
    return {
      animationsListvisible: false,
      isRun: false,
    }
  },
  computed: {
    ...mapState('lowCode', {
      selectedComponent: (state) => state.selectedComponent,
      animations: (state) => state.selectedComponent.animations,
    }),
    disabled() {
      return !!this.animations.list.find((animation) => !animation.value || animation.value.length === 0)
    },
    // isRun() {
    //   return !!this.animations.list.find(animation => animation.pending)
    // }
  },
  methods: {
    handlePushClick() {
      this.animations.list.push({
        ...defaultAnimations,
      })
    },
    handleAddClick(index) {
      this.animations.list.splice(index + 1, 0, { ...defaultAnimations })
    },
    handleRemoveClick(k) {
      const { list } = this.animations
      const index = list.findIndex((item) => item.label === k.label)
      list.splice(index, 1)
      this.save()
    },
    handleShowAnimationsModal(index) {
      this.animationsListvisible = true
      this.selectIndex = index
    },
    handleSelectAnimations(animation) {
      this.animations.list[this.selectIndex] = {
        ...animation,
        pending: false,
      }
      this.animationsListvisible = false
      this.save()
    },
    handleCloseAnimationsList() {
      this.animationsListvisible = false
    },
    handlePreview() {
      if (!this.animations.list.find((animation) => animation.pending)) {
        this.isRun = true
        EventBus.$emit('runAnimation', {
          isLoop: this.animations.isLoop,
          componentKey: this.selectedComponent.key,
          end: () => {
            console.log(22)
            this.isRun = false
          },
        })
      }
    },
    handleStop() {
      console.log('stop')
      this.$store.commit('lowCode/setAnimateRunStatus', false)
      stopAnimateByComponent(this.selectedComponent)
    },
    save() {
      // 在删除和修改效果后保存
      setSelectedComponent(1, {
        data: {
          ...this.selectedComponent,
          animations: this.animations,
        },
      })
    },
  },
  components: {
    AnimationsList,
    Timeline,
    TimelineItem,
  },
}
</script>

<style lang="less" scoped>
@import url('./index.less');
</style>
